<template>
  <div class="app">
      <category title="美食">
        <img slot="center" style="width:100%" src="./img/1.png" alt="">
        <a slot="footer" href="#">更多</a>
      </category>
      <category title="游戏">
        <ul slot="center">
            <li v-for="(item, index) in games" :key="index">{{ item }}</li>
        </ul>
        <div class="foot" slot="footer">
          <a  href="#">单机1</a>
          <a  href="#">网络2</a>
        </div>
        
      </category>
      <category title="电影">
        <img slot="center" style="width:100%" src="./img/2.png" alt="">
        <!-- <template slot="footer"> v-slot 只能用在template上 --> 
          <template v-slot:footer> 
          <div class="foot" >
            <a  href="#">经典1</a>
            <a  href="#">热门2</a>
            <a  href="#">推荐3</a>
          </div>
          <h4 style="text-align: center;">欢迎前来观影!</h4>
        </template>
      </category>
  </div>
</template>

<script>
import category from './components/category.vue'
  export default {
    name: 'App',
    components: {
      category
    },
    data () {
      return {
        foods: ['火锅', '烧烤', '小龙虾', '牛排'],
        games: ['红警', 'CF', '劲舞团', '超级玛丽'],
        films: ['《交教父》', '《拆弹专家》', '《你好,李焕英》', '《尚硅谷》']
      }
    }
  }
</script>

<style>
  .app {
    display: flex;
    justify-content: space-around;
  }
  .foot {
    display: flex;
    justify-content: space-around;
  }
</style>